<style scoped>
  .tu-switch{
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    margin-top: .75rem;
  }
  .switch-input{
    opacity: 0;
    position: absolute;
    left: 0;
    top:0;
    width: 2rem;
    height: 1rem;
    z-index: 100;
  }
  .switch-span{
    display: inline-block;
    width: 2.05rem;
    height: 1.05rem;
    background-color: #d9d9d9;
    border-radius: .55rem;

  }
  .switch-span::before{
    content: " ";
    width: 1rem;
    height: 1rem;
    position: absolute;
    display: block;
    border-radius: .5rem;
    -webkit-transform: scale(1,1);
    -webkit-transition: all 0.3s ease;

  }
  .switch-span::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: .5rem;
    background-color: #FFFFFF;
    -webkit-transform: scale(1,1);
    -webkit-transition: all 0.3s ease;
    border: 1px solid #d9d9d9;/*no*/
  }
  .switch-input:checked~span::after{
    -webkit-transform: translateX(42px);
  }
  .switch-input:checked~span{
    background-color: #2889D7;
  }
</style>

<template>
  <label class="tu-switch">
    <input class="switch-input" @change="$emit('change', currentValue)" type="checkbox" v-model="currentValue">
    <span class="switch-span"></span>
  </label>
</template>

<script>
    export default{
      name:"tu-switch",
        data(){
            return {}
        },
        props:{
          value:Boolean
        },
        mounted(){

        },
        methods: {},
        computed: {
          currentValue:{
            get(){
              return this.value
              //console.log(this.value)
            },
            set(val) {
              this.$emit('input', val);
              this.$store.state.train.value = val;
            }
          }
        },
        watch: {},
        components: {},
    }
</script>
